<!-- Author:Rain -->
<template>
  <div id="header">
    <div class="inner home-inner">
      <div class="logo">
        <router-link title="for-job" to="/geek/home"><span>ForJob</span></router-link>
      </div>
      <!-- 城市或者公司 -->
      <div class="nav-city">
        <p v-if="signType == TYPE.geek" class="nav-city-box" ka="header-switch-city">
          <i class="icon-poi"></i><span class="nav-city-selected">深圳</span><span class="switchover-city">[切换城市]</span>
        </p>
        <p v-if="signType == TYPE.boss" class="nav-city-box" ka="header-switch-city">
          <i class="icon-poi"></i><span class="nav-city-selected">ForJob团队</span><span
            class="switchover-city">[杭州]</span>
        </p>
        <div class="city-box">
          <ul class="dorpdown-province"></ul>
          <div class="dorpdown-city"></div>
        </div>
      </div>
      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li v-if="signType == TYPE.geek" @click="curTab = guide.home" :class="curTab == guide.home ? 'cur' : ''">
            <router-link to="/geek/home">首页</router-link>
          </li>
          <li v-if="signType == TYPE.geek" @click="curTab = guide.recommend"
            :class="curTab == guide.recommend ? 'cur' : ''">
            <router-link to="/geek/job-recommend">推荐职位</router-link>
          </li>
          <li v-if="signType == TYPE.geek" @click="curTab = guide.interview"
            :class="curTab == guide.interview ? 'cur' : ''">
            <router-link to="/geek/interview">面试</router-link>
          </li>
          <!-- 下面这里准备一些BOSS端的功能 -->
          <li v-if="signType == TYPE.boss" @click="curTab = guide.home" :class="curTab == guide.home ? 'cur' : ''">
            <router-link to="/boss/home">首页</router-link>
          </li>
          <li v-if="signType == TYPE.boss" @click="curTab = guide.recommend"
            :class="curTab == guide.recommend ? 'cur' : ''">
            <router-link to="/boss/geek-recommend">推荐人才</router-link>
          </li>
        </ul>
      </div>
      <div class="user-nav">
        <!-- 登录状态 -->
        <ul v-if="isLogin">
          <!-- 求职者这边 -->
          <li v-if="signType == TYPE.geek" @click="curTab = guide.AI" :class="curTab == guide.AI ? 'cur' : ''">
            <router-link to="/geek/ai">求职AI</router-link>
          </li>
          <li v-if="signType == TYPE.geek" @click="curTab = guide.message"
            :class="curTab == guide.message ? 'cur' : ''">
            <router-link to="/geek/Message">消息</router-link>
          </li>
          <span v-if="signType == TYPE.geek" class="nav-resume-tools">
            <li @click="curTab = guide.resume" :class="curTab == guide.resume ? 'cur' : ''">
              <router-link to="/geek/resume">简历</router-link>
            </li>
            <div class="nav-resume-box">
              <ul>
                <!-- 下面这个暂时隐藏了！ -->
                <li class="resume-box-update" style="display: block">
                  <a href="javascript:;" rel="nofollow">
                    <span>简历更新</span>
                    <p>自动识别新简历</p>
                  </a>
                </li>
                <li class="resume-box-resume">
                  <router-link @click="curTab = guide.resume" to="/geek/resume">
                    <span>在线编辑</span>
                    <p>匹配优质岗位</p>
                  </router-link>
                </li>
                <li @click="uploadResume" class="resume-box-upload nav-up-file">
                  <a class="header-resume-upload" href="javascript:;">
                    <span>附件上传</span>
                    <p>快速投递心怡职位</p>
                  </a>
                </li>
              </ul>
            </div>
          </span>
          <!-- BOSS端这边 -->
          <li v-if="signType == TYPE.boss" @click="curTab = guide.message"
            :class="curTab == guide.message ? 'cur' : ''">
            <router-link to="/boss/chat">沟通</router-link>
          </li>
          <li v-if="signType == TYPE.boss" @click="curTab = guide.manage" :class="curTab == guide.manage ? 'cur' : ''">
            <router-link to="/boss/pos-manage">职位管理</router-link>
          </li>
          <!-- <li v-if="signType == TYPE.boss" @click="curTab = guide.center" :class="curTab == guide.center ? 'cur' : ''">
            <router-link to="/boss/center">BOSScenter</router-link>
          </li> -->
          <li class="nav-figure">
            <router-link to="/geek/center" @click="curTab = ''">
              <span class="label-text">{{ username }}</span>
              <img :src="pic" alt="" />
            </router-link>
            <div class="dropdown">
              <router-link to="/geek/center" @click="curTab = ''" class="personal-center"
                v-if="signType == TYPE.geek">个人中心<span>查看面试投递状态、编辑在线简历</span></router-link>
              <router-link to="/boss/center" @click="curTab = ''" class="personal-center"
                v-if="signType == TYPE.boss">个人中心<span>查看岗位数据、编辑个人名片</span></router-link>
              <router-link v-if="signType == TYPE.geek" to="/geek/Message" @click="curTab = guide.message"
                class="notify-set">消息通知</router-link>
              <router-link v-if="signType == TYPE.boss" to="/boss/chat" @click="curTab = guide.message"
                class="notify-set">消息通知</router-link>
              <router-link v-if="signType == TYPE.geek" class="link-recruit" to="/user">切换为招聘者</router-link>
              <router-link v-if="signType == TYPE.boss" class="link-recruit" to="/user">切换为求职者</router-link>
              <a href="javascript:;" @click="logout" class="link-logout">退出登录</a>
            </div>
          </li>
        </ul>
        <!-- 未登录状态 -->
        <div v-else style="transform: translateX(-30px)" class="btns">
          <router-link class="btn btn-outline header-login-btn" to="/user">
            登录/注册
            <div class="header-login-desc">
              <span class="login-desc-title">登录注册后可以：</span>
              <ul class="login-desc-list">
                <li><span class="login-desc-icon desc-icon-chat"></span>直接与老板/人才在线开聊</li>
                <li><span class="login-desc-icon desc-icon-match"></span>更精准匹配求职意向</li>
                <li><span class="login-desc-icon desc-icon-info"></span>获得更多的求职信息</li>
              </ul>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>

  <el-dialog v-model="centerDialogVisible" title="说明" width="800" align-center>
    <h3>【个人信息收集说明】</h3>
    <p>
      尊敬的用户，为了向您提供卓越的简历智能AI分析及面试预测服务，我们的系统需要您上传个人简历等相关资料。这些资料将作为我们服务的基础，旨在优化您的求职文件并预测可能的面试内容。
    </p>

    <h3>【为什么需要这些信息？】</h3>
    <P>简历信息：您的简历将通过我们的AI系统进行深入智能分析，以识别提升空间，给出个性化建议，帮助您的简历脱颖而出。
      <br />
      面试预测：依据您的经验和技能，我们的AI将模拟可能的面试场景，为您提供准备建议和常见问题，以便您能够更加自信地面对面试官。
      <br />
      这些信息的提供对于我们系统的简历优化、分析及面试预测功能至关重要。
    </P>

    <h3>【隐私保护措施】</h3>

    <p>
      我们深知个人信息的重要性，因此承诺在提供服务期间严格遵守数据保护原则。
      未经您的明确同意，我们不会将您的信息用于其他目的，也不会与第三方分享。
      我们采取了先进的安全技术来保护您的数据安全，防止任何未授权的访问和泄露。
      如果您在操作过程中有任何疑问或需要帮助，请随时联系我们的客服团队。
      我们期待帮助您打造一份无懈可击的简历，并在职业道路上取得成功。
    </p>
    <br />

    <p>祝您事业有成！</p>
    <br />
    <p>ForJob团队</p>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { useBossStore } from '@/store/modules/boss'
import { useRouter } from 'vue-router'
import { useSystemStore } from '@/store/modules/system'
import { todoPicPath } from "@/utils/todo"
const router = useRouter()
const userStore = useUserStore()
const BossStore = useBossStore()
const systemStore = useSystemStore()
/* header信息props已经固定！！！ */
const props = defineProps(['signType'])
const boss = BossStore.boss
//维护header信息
enum guide {
  home = 'home', //geek && boss
  recommend = 'recommend', // geek && boss
  message = 'message', // geek && boss
  resume = 'resume', //geek,
  search = 'search', //boss,
  more = 'more', //boss,
  manage = 'manage', //boss，
  interview = 'interview', //geek
  center = 'center',
  AI = 'AI'
}
const defaultPic = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const { curTab } = toRefs(systemStore)
let username = ref('小云')
let pic = ref(defaultPic)
// 判断是否是登陆状态
let isLogin = ref(userStore.isLogin)

//判断是BOSS还是GEEK
let signType = ref(props.signType)
enum TYPE {
  geek = 'geek',
  boss = 'boss'
}
if (props.signType == 'boss') {
  BossStore.getBossInfo()
    .then((val) => {
      //目前已经在boss端已经存储一份信息了
      console.log(val)
      let bascBossUrl = '/api/images/companyLogo/'
      pic.value = bascBossUrl + boss.profile
      username = boss.realname
      BossStore.signType = signType.value
    })
    .catch((err) => {
      console.log(err)
    })
} else if (props.signType == 'geek') {
  //获取到登录信息
  userStore
    .getUserInfo()
    .then((val) => {
      let {
        data: { basicInfo, educationInfo, forjobInfo }
      } = val as any
      //先将信息放进状态管理库中
      signType.value = basicInfo.signType

      //用户信息请求成功，进行相关的页面渲染
      username.value = basicInfo.name
      pic.value = todoPicPath(basicInfo.profile)
    })
    .catch((err) => {
      console.log(err)
    })
}

//如果isLogin状态就直接可以去状态管理库中获取信息

//点击退出登录
function logout() {
  isLogin.value = false
  //第一种方式
  userStore
    .logout()
    .then(() => {
      pic.value = defaultPic
      username.value = '未登录'

      //进行提示
      ElMessage({
        message: '退出登录~',
        type: 'info'
      })
      router.push('/geek/home')
    })
    .catch((err) => {
      console.log(err)
    })
}

const centerDialogVisible = ref(false)
function uploadResume() {
  //这里进行上传简历
  centerDialogVisible.value = true
}

/* geek监听头像变更 */
userStore.$subscribe((mutation, state) => {
  //这里可以进行头像的更换
  pic.value = todoPicPath(state.user.basicInfo?.profile)

})

</script>

<style scoped>
.inner {
  max-width: 1184px;
  margin: 0 auto;
}

.home-inner {
  max-width: 1184px;
}

#header {
  width: 100%;
  height: 49px;
  background: linear-gradient(to right, #d65db1, #2c73d2);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 5;
}

#header a {
  color: #fff;
}

#header a:hover {
  color: var(--themeColor);
}

.logo {
  float: left;
  padding: 15px 0 0 0;
  position: relative;
}

.logo a {
  display: block;
  position: absolute;
  width: 194px;
  height: 35px;
  background: url('./LOGO.png') 0 0 no-repeat;
  background-size: 194px 35px;
  background-position: center;
  top: -10px;
  z-index: 200;
  height: 70px;
}

.logo span {
  display: none;
}

.nav,
.user-nav {
  font-size: 0;
  float: left;
  margin-left: 14px;
  height: 49px;
  line-height: 49px;
}

.nav ul,
.user-nav ul {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}

.nav li,
.user-nav li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  text-align: center;
  font-size: 14px;
  margin: 0 5px;
}

.nav li>a,
.user-nav li>a {
  font-weight: 500;
}

.user-nav li.nav-dot {
  color: #fff;
  margin: 0;
  font-size: 0;
  width: 1px;
  height: 8px;
  background: #fff;
  border-radius: 1px;
  margin-top: 21px;
}

#header .inner {
  position: relative;
  box-sizing: border-box;
}

#header .inner:before {
  content: ' ';
  height: 49px;
  width: 726px;
  display: block;
  position: absolute;
  left: 196px;
  top: 0;
  z-index: -1;
  background: url(https://img.bosszhipin.com/static/file/2023/g3f9o7qs9z1679895399114.png) 0 0 / auto 49px no-repeat;
}

#header .header-resume-new {
  position: relative;
  margin-right: 10px;
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}

#header .header-resume-new a {
  display: block;
  cursor: pointer;
}

#header .header-resume-new a:hover .header-resume-tip {
  display: block;
}

#header .header-resume-new a .new {
  top: 8px;
  right: -24px;
}

#header .header-resume-new .header-resume-tip {
  display: none;
  position: absolute;
  height: 30px;
  right: -38px;
  white-space: nowrap;
  font-size: 13px;
  color: #fff;
  line-height: 18px;
  background: #5e96f2;
  line-height: 30px;
  padding: 0 20px;
  top: 37px;
}

#header .header-resume-new .header-resume-tip:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent transparent #5e96f2;
  border-style: solid;
  border-width: 0 6px 6px;
  top: -4px;
  right: 70px;
}

#header .header-resume-new .header-resume-tip .header-resume-btn {
  display: inline-block;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #fff;
  line-height: 18px;
  margin-left: 20px;
  padding: 0 10px;
  font-size: 12px;
}

#header .header-resume-new .header-resume-tip .header-resume-btn:hover {
  background: #fff;
  color: #5e96f2;
}

.nav li:last-of-type {
  margin-right: 0;
}

.nav li a,
.user-nav li a {
  display: block;
  padding: 0 5px;
  position: relative;
}

.nav li a:hover,
.user-nav li a:hover {
  color: var(--themeColor);
}

.nav li.cur a,
.nav li.cur a:hover {
  color: var(--themeColor) !important;
}

#header .user-nav li.cur a,
#header .user-nav li.cur a:hover {
  color: var(--themeColor);
}

.user-nav {
  float: right;
  margin-left: 5px;
}

.user-nav .btns .vline {
  margin-top: -8px;
  background: 0 0;
}

.user-nav .btns .link-scan {
  display: inline-block;
  font-size: 14px;
  margin-right: 10px;
}

.user-nav .btns .link-publish {
  display: inline-block;
  font-size: 13px;
}

.user-nav .btns .btn-outline {
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  height: 26px;
  line-height: 26px;
  padding: 0 11px;
  min-width: 0;
  margin-left: 10px;
  color: #fff;
  vertical-align: inherit;
  background: 0 0;
}

.user-nav .btns .btn-outline:hover {
  background: rgba(0, 190, 189, 0.2);
}

.user-nav li.nav-figure {
  margin-right: 0;
  margin-left: 5px;
  position: relative;
  padding: 7px 0 6px;
}

.user-nav li.nav-figure>a {
  border-radius: 6px;
  padding: 0 5px;
  height: 36px;
  display: flex;
  align-items: center;
  transition: all 0.2s linear;
}

.user-nav li.nav-figure:hover>a {
  background: rgba(255, 255, 255, 0.2);
}

.user-nav li.nav-figure:hover:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 4px;
  background: 0 0;
  z-index: 2;
}

#header .user-nav li.nav-figure:hover>a {
  color: #fff;
}

.user-nav a {
  font-size: 14px;
}

.user-nav .link-sign-resume {
  position: relative;
  margin-right: 20px;
  display: inline;
}

.user-nav .btns .link-apply-job {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  height: 30px;
  width: 75px;
  background: url(https://img.bosszhipin.com/static/file/2022/v0nl77lxv91656999533806.png) 0 0 / auto 30px no-repeat;
  transition: none;
}

.user-nav .btns .link-apply-job:hover {
  background-position: -75px 0;
}

.user-nav .btns .link-apply-job .new {
  top: -3px;
  right: -16px;
}

.user-nav .new {
  display: none;
  position: absolute;
  top: -9px;
  right: -24px;
  height: 14px;
  padding: 0 4px;
  line-height: 13px;
  background-color: #ef505e;
  color: #fff;
  font-size: 12px;
  border-radius: 7px;
}

.nav-figure .label-text {
  margin-top: -2px;
  line-height: 20px;
  padding-right: 4px;
  vertical-align: middle;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
}

.nav-figure img {
  width: 28px;
  height: 28px;
  border-radius: 100%;
  vertical-align: middle;
}

.nav-city {
  float: left;
  position: relative;
  cursor: pointer;
  height: 49px;
  line-height: 49px;
  color: var(--themeColor);
  padding-left: 180px;
}

.nav-city .icon-poi {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 18px;
  background: url(https://img.bosszhipin.com/static/file/2023/umua62pczi1679922532668.png) 0 -18px/18px auto no-repeat;
  margin: 16px 3px 0 24px;
}

.nav-city .nav-city-selected {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
  vertical-align: middle;
}

.nav-city .switchover-city {
  font-size: 12px;
  color: #fff;
  margin-left: 10px;
}

.nav-city .city-box {
  font-size: 14px;
}

#header .nav-figure.selected a {
  color: var(--themeColor);
}

.nav-figure .dropdown {
  display: none;
  position: absolute;
  width: 234px;
  left: auto;
  right: 0;
  top: 53px;
  z-index: 2;
  padding: 4px;
  box-sizing: border-box;
  text-align: left;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border: 1px solid #ededed;
}

.nav-figure:hover .dropdown {
  display: block;
}

#header .nav-figure .dropdown a {
  position: relative;
  padding: 12px 20px;
  line-height: 20px;
  color: #222;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #fff;
  border-radius: 4px;
  transition: all 0.2s linear;
}

#header .nav-figure .dropdown a span {
  display: block;
  font-size: 12px;
  color: #999;
  line-height: 17px;
  margin-top: 4px;
}

#header .nav-figure .dropdown a:hover {
  color: var(--themeColor);
  background: #f8f8f8;
  font-weight: 500;
}

#header .nav-figure .dropdown a.link-logout:after,
#header .nav-figure .dropdown a.link-recruit:after {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background-color: #f2f5fa;
  z-index: 1;
}

#header .nav-figure .dropdown a.link-logout,
#header .nav-figure .dropdown a.link-recruit {
  margin-top: 4px;
  padding-top: 16px;
}

#header .nav-figure .dropdown a.link-logout:hover,
#header .nav-figure .dropdown a.link-recruit:hover {
  background-color: #fff;
  color: var(--themeColor);
}
</style>

<!-- 基础样式！！！ -->
<style scoped>
#header .header-login-btn {
  position: relative;
}

#header .header-login-btn:hover .header-login-desc {
  display: block;
}

#header .header-login-btn:hover:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  z-index: 1;
  background: transparent;
}

#header .header-login-desc {
  display: none;
  position: absolute;
  left: 50%;
  top: 34px;
  margin-left: -114px;
  background: #ffffff;
  box-shadow:
    0px 16px 40px 0px rgba(153, 153, 153, 0.3),
    0px 2px 10px 0px rgba(0, 0, 0, 0.08);
  z-index: 2;
  font-size: 14px;
  text-align: left;
  padding: 16px 18px;
  border-radius: 8px;
  box-sizing: border-box;
  font-weight: normal;
}

#header .header-login-desc:before {
  content: ' ';
  position: absolute;
  left: 50%;
  margin-left: -4px;
  top: -8px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

#header .header-login-desc .login-desc-title {
  font-weight: 500;
  color: #333333;
  line-height: 20px;
  display: block;
}

#header .header-login-desc .login-desc-list {
  margin-top: 4px;
}

#header .header-login-desc .login-desc-list li {
  margin: 8px 0 0 0;
  display: block;
  font-size: 13px;
  color: #333333;
  text-align: left;
  height: 26px;
  line-height: 26px;
}

#header .header-login-desc .login-desc-list .login-desc-icon {
  display: inline-block;
  height: 26px;
  width: 26px;
  margin-right: 8px;
  vertical-align: middle;
  background: url(https://img.bosszhipin.com/static/file/2022/7rf2cut4bc1669274264900.png) 0 0 / 26px auto no-repeat;
}

#header .header-login-desc .login-desc-list .login-desc-icon.desc-icon-chat {
  background-position: 0 0;
}

#header .header-login-desc .login-desc-list .login-desc-icon.desc-icon-match {
  background-position: 0 -26px;
}

#header .header-login-desc .login-desc-list .login-desc-icon.desc-icon-info {
  background-position: 0 -52px;
}

#header .header-resume-new .header-resume-tip {
  z-index: 2;
  display: none;
}

#header .header-resume-new a:hover .header-resume-tip {
  display: none;
}

#header .header-nav-group {
  margin: 0 5px;
  float: none;
}

#header .header-nav-group li {
  margin: 0;
  position: relative;
}

#header .header-nav-group .header-nav-dot {
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background: #fff;
  vertical-align: middle;
}

#header .user-nav .header-login-btn {
  vertical-align: middle;
}

#header .user-nav .nav-resume-tools {
  display: inline-block;
  vertical-align: middle;
}

#header .user-nav .nav-resume-tools>a {
  display: inline-block;
  font-weight: 500;
  color: #ffffff;
  line-height: 20px;
  height: auto;
  padding: 3px 7px;
  vertical-align: middle;
  border-radius: 4px;
  margin-right: 8px;
  border: 1px solid transparent;
}

#header .user-nav .nav-resume-tools>a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

#header .user-nav .nav-resume-tools:hover .nav-resume-box {
  display: block;
}

#header .user-nav .nav-resume-box {
  display: none;
  position: absolute;
  top: 49px;
  right: 0;
  z-index: 1;
  padding: 4px;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  border: 1px solid #ededed;
}

#header .user-nav .nav-resume-box ul {
  overflow: hidden;
}

#header .user-nav .nav-resume-box li {
  display: block;
  float: left;
  text-align: center;
  width: 120px;
  margin: 4px;
  border-radius: 8px;
}

#header .user-nav .nav-resume-box li a {
  border: 1px solid transparent;
  transition: all 0.2s linear;
  border-radius: 8px;
}

#header .user-nav .nav-resume-box li:hover a {
  border: 1px solid transparent;
  border: 1px solid rgba(0, 190, 189, 0.5);
}

#header .user-nav .nav-resume-box li:hover span {
  color: var(--themeColor);
}

#header .user-nav .header-resume-new+.nav-resume-box .resume-box-update {
  display: block;
}

#header .user-nav .nav-resume-box .resume-box-update {
  display: none;
}

#header .user-nav .nav-resume-box li.resume-box-boss {
  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
}

#header .user-nav .nav-resume-box li.resume-box-geek {
  background: linear-gradient(180deg, #ffe4c2 0%, rgba(255, 255, 255, 0) 100%);
}

#header .user-nav .nav-resume-box li.resume-box-geek a:before {
  background-position: 0 -60px;
}

#header .user-nav .nav-resume-box li.resume-box-upload a:before {
  background-position: 0 -120px;
}

#header .user-nav .nav-resume-box li.resume-box-update {
  position: relative;
  background: linear-gradient(180deg, #ccddff 0%, rgba(255, 255, 255, 0) 100%);
}

#header .user-nav .nav-resume-box li.resume-box-update:after {
  content: '解析成功';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  font-size: 12px;
  background: rgba(0, 166, 167, 0.1);
  display: inline-block;
  padding: 2px 4px;
  line-height: 16px;
  background: var(--themeColor);
  border-radius: 0px 8px 0px 8px;
  color: #fff;
}

#header .user-nav .nav-resume-box li.resume-box-update a:before {
  background-position: 0 -180px;
}

#header .user-nav .nav-resume-box li.resume-box-resume {
  background: linear-gradient(180deg, #a6ffe7 0%, rgba(255, 255, 255, 0) 100%);
}

#header .user-nav .nav-resume-box li.resume-box-resume a:before {
  background-position: 0 -240px;
}

#header .user-nav .nav-resume-box li.resume-box-upload {
  background: linear-gradient(180deg, #a4e5ff 0%, rgba(255, 255, 255, 0) 100%);
}

#header .user-nav .nav-resume-box li a {
  display: block;
  padding: 20px 0 10px;
}

#header .user-nav .nav-resume-box li a:before {
  content: ' ';
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  background: url(https://img.bosszhipin.com/static/file/2023/d1mkjebr121695198610640.png) 0 0 / 60px auto no-repeat;
}

#header .user-nav .nav-resume-box li span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #222222;
  line-height: 20px;
  margin-top: 12px;
  transition: all 0.2s linear;
}

#header .user-nav .nav-resume-box li p {
  font-size: 12px;
  color: #999999;
  line-height: 17px;
  margin-top: 4px;
}

/* 未登录状态下的显示 */
</style>
